<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天知道</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css">

    <script src="./js/axios.min.js"></script>
</head>

<body>
<div id="app">

    <el-form :inline="true" :model="studentForm" class="demo-form-inline">
        <el-form-item label="学生年龄">
            <el-input v-model="studentForm.age" placeholder="学生年龄"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
            <el-input v-model="studentForm.name" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  icon="el-icon-search" @click="searchWeather">查询</el-button>
            <el-button type="danger" icon="el-icon-remove"@click="piliangdelete">批量删除</el-button>
            <el-button type="success" icon="el-icon-circle-plus" @click="insertStudent">添加</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="students"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="学生姓名"
                >
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="sage"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="stuno"
                label="学号"
               >
        </el-table-column>
        <el-table-column
                prop="cclass.cname"
                label="学生班级">
        </el-table-column>
        <el-table-column>
            <template slot-scope="scope">
                <el-button type="success" size="small" icon="el-icon-edit" @click="editStudent(scope.row)">编辑</el-button>
                <el-button type="danger" size="small"  icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3,6,9]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog
            title="修改学生"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form ref="form" :model="editStudentForm" label-width="80px" >
            <el-form-item label="学生姓名">
                <el-input v-model="editStudentForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editStudentForm.sage"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="editStudentForm.gender"></el-input>
            </el-form-item>
            <el-form-item label="学号">
                <el-input v-model="editStudentForm.stuno"></el-input>
            </el-form-item>
            <el-form-item label="班级">
                <el-select v-model="editStudentForm.cid" placeholder="请选择班级">
                        <el-option
                                v-for="item in cclass"
                                :key="item.id"
                                :label="item.cname"
                                :value="item.id">
                        </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="updateStudent">确认修改</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
            title="添加学生"
            :visible.sync="dialogVisible2"
            width="30%"
    >
        <el-form ref="form" :model="editStudentForm" label-width="80px" >
            <el-form-item label="学生姓名">
                <el-input v-model="editStudentForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editStudentForm.sage"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="editStudentForm.gender"></el-input>
            </el-form-item>
            <el-form-item label="学号">
                <el-input v-model="editStudentForm.stuno"></el-input>
            </el-form-item>
            <el-form-item label="班级">
                <el-select v-model="editStudentForm.cid" placeholder="请选择班级">
                    <el-option
                            v-for="item in cclass"
                            :key="item.id"
                            :label="item.cname"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="saveStudent">确认添加</el-button>
                <el-button @click="dialogVisible2=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<!-- 自己的js -->
<script type="text/javascript">
    let app=new Vue({
        el:"#app",
        data:{
            //存放所有班级
            cclass:[],
            dialogVisible:false,
            studentForm:{},
            editStudentForm:{},
            insertStudentForm:{},
            students:[],
            currentPage:1,
            pageSize: 3,
            total: 0,

            //表格多选项
            multipleSelection:[],

            //编辑对话框的显示和隐藏
            dialogVisible2:false,
        },
        created(){
            this.searchWeather();
            //查询所有班级
            this.loadAllClass();
        },
        methods:{
            //添加学生
            saveStudent(){
                axios.post("http://localhost:8080/insert/",this.editStudentForm).then(result=>{
                    //console.log(result)
                    if(result.data.code===200) {
                        this.$message.success(result.data.msg);
                        //关闭对话框
                        this.dialogVisible2=false;
                        //刷新页面
                        this.searchWeather();
                    }
                })
            },
            //批量删除
            piliangdelete(){
                axios.post("http://localhost:8080/batchDelete/",this.multipleSelection).then(result=>{

                    if(result.data.code===200) {
                        this.$message.success(result.data.msg);
                        //刷新页面
                        this.searchWeather();
                    }
                })
            },
            //表格左侧多选获取
            handleSelectionChange(val){
                this.multipleSelection=val;
               //console.log( this.multipleSelection)
            },
            //修改学生信息
            updateStudent(){
                axios.put("http://localhost:8080/update/",this.editStudentForm).then(result=>{
                    console.log(result);
                    if(result.data.code===200){
                        this.$message.success("修改成功");
                        //关闭对话框
                        this.dialogVisible=false;
                        //刷新页面
                        this.searchWeather();
                    }
                })
            },
            //加载所有班级
            loadAllClass(){
                axios.get("http://localhost:8080/list/").then(result=>{
                   // console.log(result);
                   this.cclass=result.data.data;
                    //console.log(this.cclass);
                })
            },
            searchWeather(){
                axios.post("http://localhost:8080/find/"+this.currentPage+"/"+this.pageSize,this.studentForm).then(result=>{
                    //console.log(result);
                    this.students=result.data.data.records;
                    this.total=result.data.data.total;
                })


            },
            //改变每页的条数时触发该方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.searchWeather();
            },
            //改变当前页码时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.searchWeather();
            },
            del(row){
                let numstuno=row.id;
                axios.delete("http://localhost:8080/deleteById/"+numstuno).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("删除成功") //弹出成功的消息框
                        this.searchWeather(); //重新加载表格
                    }
                })
            },
            editStudent(row){
                this.dialogVisible=true;
                this.editStudentForm=row;
            },
            insertStudent(){
                this.dialogVisible2=true;
            }
        }
    })
</script>

</body>
</html>
